<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>編輯貼文</title>

<link rel="stylesheet" href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">
	
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>
<script src="../js/jquery.elastic.source.js"></script>

<style>
input.text,input.file,textarea {
	margin-bottom: 12px;
	width: 235px;
	padding: .4em;
	font-size: 14px;
	font-family: '微軟正黑體';
}

button.ui-datepicker-current {
	display: none;
}

p{
	border-style: solid;
	border-color: grey;
	border-width: thin;
	padding:10px;
	margin:-1px;
	border-radius: 15px;
}

.blockstyle {
	border-style: solid;
	border-color: grey;
	border-width: thin;
	padding:10px;
	margin:-1px;
	border-radius: 15px;
}

.block {
	position: relative;
	border-style: solid;
	border-color: orange;
	border-radius: 15px;
	margin: 2px;
}
.iconinvisible{
	position: absolute;
	top:5px;
	right:5px;
	opacity: 0;
	filter: alpha(opacity =    0);
}
.iconvisible{
	opacity: 1;
	filter: alpha(opacity =    100);
}
</style>

<script>
	$(function() {
		$(".buttonClass, button").button();
		$( ".elastic" ).elastic();
		$("#summitid").click(function() {
			parent.$().message("貼文已送出");
		});
		
		$('#public').attr('checked', 'checked');
		$('#knowledge').attr('checked', 'checked');
		$(".radioclass").buttonset();
		
		$(".blockstyle img").hover(function(){
			$(".iconinvisible").toggleClass("iconvisible",300).clearQueue();
		});
		$(".blockstyle a").click(function(){
			return false;
		});
	});
</script>

</head>

<body style="overflow-x:hidden;">

	<form id="newpostform" action="#" method="get"
		style="position:relative; line-height: 12px; font-size: 16px; font-family: '微軟正黑體'; padding-: 10px; ">
	
		<p style="border-bottom:none;">
			性質： <span class="radioclass"> <input id="public" type="radio"
				name="privacy" value="public"><label for="public">公開</label> <input
				id="private" type="radio" name="privacy" value="private"><label
				for="private">私人</label>
			</span>
		</p>
		<p style="border-bottom:none;">
			類型： <span class="radioclass"> 
			<input id="life" type="radio" name="posttype" value="life"><label for="life">生活</label> 
			<input id="knowledge" type="radio" name="posttype" value="knowledge"><label for="knowledge">知識</label>
			<input id="store" type="radio" name="posttype" value="store"><label for="store">店家</label> 
			<input id="adopt" type="radio" name="posttype" value="adopt"><label for="adopt">領養</label>
			</span>
		</p>
		<p style="border-bottom:none;">
			<label for="selfintro">內容：</label>
			<textarea name="selfintro" id="selfintro" cols="80" rows="3" style="resize: none; max-height:132px; width: 400px;"
				placeholder="請輸入貼文內容，請放心不限字數。輸入框會隨內容伸展。"
				class="elastic text ui-widget-content ui-corner-all"></textarea>
		</p>
		<div style="border-bottom:none;" class="blockstyle">
			<label for="selfintro">現有圖片：</label>
			
			<div style="display:inline-block; position:relative;">
				<img src="../images/cat1.jpg" alt="Image 1" width="120" height="120" />
					<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
			</div>		
			
			<div style="display:inline-block; position:relative;">
	<img src="../images/cat.jpg" alt="Image 2" width="120" height="120" />
		<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
				</div>	
				
				<div style="display:inline-block; position:relative;">
	<img src="../images/paw-icon.jpg" alt="Image 3" width="120" height="120" />
		<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
					</div>	
					
					<div style="display:inline-block; position:relative;">
	<img src="../images/cat1.jpg" alt="Image 4" width="120" height="120" />
		<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
					</div>	
					
					<div style="display:inline-block; position:relative;">
	<img src="../images/paw-icon.jpg" alt="Image 5" width="120" height="120" />
		<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
					</div>	
					
					<div style="display:inline-block; position:relative;">
	<img src="../images/cat.jpg" alt="Image 6" width="120" height="120" />
		<a href="#"><img src="../images/delete.png" class="iconinvisible"></a>
					</div>
						
		</div>
		<!-- input type="file" 加上 multiple attribute使其可以選擇多檔案 -->
		<p style="border-bottom:none;">
			<label for="uploadphoto">上傳圖片：</label><input type="file"
				name="uploadphoto" id="uploadphoto"
				style="width: 300px; font-size: 18px; font-family: '微軟正黑體';">
		</p>
		<p>
			<input id="summitid" type="submit" value="送出 " class="buttonClass">
			<input type="reset" value="重填" class="buttonClass">
		</p>
	</form>
	
</body>

</html>